<template>
  <div>
    <Card class="smart-query-card">
      <!------ 查询条件第一行 begin------->
      <Row class="smart-query-form-row">
        <span>
          <Input
            placeholder="标签名称"
            style="width: 180px"
            v-model="queryForm.tagName"
          />
        </span>
        <span>
          <Input
            placeholder="标签分类"
            style="width: 180px"
            v-model="queryForm.tagTypeId"
          />
        </span>
        <ButtonGroup>
          <Button
            @click="queryList"
            icon="ios-search"
            type="primary"
            >查询</Button
          >
        </ButtonGroup>
      </Row>
      <!------ 查询条件第一行 begin------->
    </Card>
        <Card class="warp-card">
      <!-------表格列表 begin------->
      <Table
        :columns="mainTable.columnArray"
        :data="mainTable.data"
        :loading="mainTable.loading"
        border
        highlight-row
        ref="mainTable"
        @on-selection-change="selectTable"
        @on-select-cancel="selectCancel"
      >
      </Table>

      <Page
        :current="queryForm.pageNum"
        :page-size="queryForm.pageSize"
        :page-size-opts="mainTablePage.pageSizeOps"
        :total="mainTablePage.total"
        @on-change="changeMainTablePagePageNum"
        @on-page-size-change="changeMainTablePagePageSize"
        class="smart-query-table-page"
        show-elevator
        show-sizer
        show-total
      />
    </Card>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right: 10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
import { dateTimeRangeConvert } from "@/lib/util";
import { labelApi } from "@/api/label";
import { assetsApi } from "@/api/assets";
import { PAGE_SIZE_OPTIONS } from "@/constants/table-page";
const PAGE_SIZE_INIT = 10;
export default {
  name: "CodeReviewListForm",
  components: {},
  props: {
    //是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true,
    },
    //更新的表单数据对象
    updateData: {
      type: Array,
    },
  },
  data() {
    return {
      //表单数据
      form: {
        name: null,
        type: null,
      },
      flag: 0,
      queryForm: {
        //ID
        id: null,
        //品种
        kind: null,
        //名字
        name: null,
        //颜色
        color: null,
        createTimeRange: ["", ""],
        updateTimeRange: ["", ""],
        pageNum: 1,
        pageSize: PAGE_SIZE_INIT,
        orders: [],
      },
      //表格分页
      mainTablePage: {
        total: 0,
        pageSizeOps: PAGE_SIZE_OPTIONS,
      },
            //表格多选选中的元素数组
      mainTableSelectArray: [],
      //表格
      mainTable: {
        //加载中
        loading: false,
        //表格数据
        data: [],
        //表格列
        columnArray: [
          {
            type: "selection",
            width: 30,
            align: "center",
          },
          {
            title: "标签名称",
            key: "tagName",
            tableColumn: "t_peony.kind",
          },
          {
            title: "标签分类",
            key: "tagTypeName",
            tableColumn: "t_peony.name",
          },
          {
            title: "描述",
            key: "tagDesc",
            tableColumn: "t_peony.color",
          },
          {
            title: "创建时间",
            key: "createTime",
            tableColumn: "t_peony.create_time",
          }
        ],
      },
      selectEmploy: [],
      assetIdList:[]
    };
  },
  watch: {
    updateData(newData,oldData){
        if(newData.length){
            let arr = []
            newData.forEach(item=>{
                arr.push(item.id)
            })
            this.assetIdList= arr
        }
    },
    isUpdate: function (newValue, oldValue) {

    },
    
  },
  mounted() {
  },
  created() {
   this.queryList();},
  methods: {
    //查询
    async queryList() {
      this.mainTable.loading = true;
      try {
        let params = this.convertQueryParam();
        let result = await labelApi.queryFileList(params);
          //回显
      this.selectEmploy.forEach(item=>{
        result.data.list.forEach(element=>{
          if(element.id==item){
            this.$set(element,'_checked',true)
          }
        })
      })
        this.mainTable.data = result.data.list;
        this.mainTablePage.total = result.data.total;
      } finally {
        this.mainTable.loading = false;
      }
    },
    convertQueryParam() {
      let createTimeArray = dateTimeRangeConvert(
        this.queryForm.createTimeRange
      );
      let updateTimeArray = dateTimeRangeConvert(
        this.queryForm.updateTimeRange
      );
      return {
        ...this.queryForm,
        createTimeBegin: createTimeArray[0],
        createTimeEnd: createTimeArray[1],
        updateTimeBegin: updateTimeArray[0],
        updateTimeEnd: updateTimeArray[1],
      };
    },
    //修改页码
    changeMainTablePagePageNum(pageNum) {
      this.queryForm.pageNum = pageNum;
      this.queryList();
    },
    //修改页大小
    changeMainTablePagePageSize(pageSize) {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = pageSize;
      this.queryList();
    },
    cancel() {
      this.$emit("on-form-close");
    },
    async save() {
        if(!this.selectEmploy.length){
            this.$Message.error("请选择至少一条标签");
        }
        let param = { 
          assetIdList : this.assetIdList,
          tagIdList: this.selectEmploy
        }
        this.$Spin.show();
        let res = await assetsApi.mulUpdateLabel(param);
        this.$Message.success("更新成功");
        this.$Spin.hide();
        this.$emit("on-form-close");
    },
    resetForm() {
      this.form = {
        name: null,
        type: null,
      };
      this.$refs["form"].resetFields();
    },
    async add() {
      this.$Spin.show();
      let res = await peonyApi.addPeony(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    },
    async update() {
      this.$Spin.show();
      let res = await peonyApi.updatePeony(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    },
 selectTable(arr) {
      arr.forEach((item) => {
        if (!this.selectEmploy.includes(item.id)) {
          this.selectEmploy.push(item.id);
        }      
      });
    },
    selectCancel(selection, row) {
      this.selectEmploy = this.selectEmploy.filter((item) => {
        return item != row.id;
      });
    },
  },
};
</script>